<div v-for="(item,index) in 10" class="match-item">
  <div v-if="index==0 || index == 5" class="text-color-secondary text-align-center margin-bottom-5 match-item-date">Today ,18 Sep 2024</div>
  <div class="flex-column padding-10 bg-regular match-item-box">
    <time class="text-align-center margin-bottom-10 margin-left-30 match-item-time">09:56 La Liga R25</time>
    <div class="align-center match-item-info">
      <img class="match-item-star" :src="index==0 ? './images/star_icon_.png' : './images/star_icon.png'" alt="" srcset="" />
      <div class="flex-1 align-center flex-gap-5 match-item-team">
        <a class="flex-1 width-0 text-ellipsis-2" href="matchDetail.html" title="比赛详情">Manchester United Manchester ManchesterManchesterManchester</a>
        <a href="matchDetail.html" title="比赛详情">
          <img class="match-team-logo" src="./images/ball_park.png" alt="" srcset="" />
        </a>
      </div>
      <div class="flex-column align-center margin-left-20 margin-right-20 text-color-secondary match-item-res">
        <span class="font-size-normal font-weight-bold match-item-score">1-0</span>
        <span class="font-size-min line-height-1 match-item-tatus">End</span>
      </div>
      <div class="flex-1 align-center flex-gap-5 match-item-team">
        <a href="matchDetail.html" title="比赛详情">
          <img class="match-team-logo" src="./images/logo.ico" alt="" srcset="" />
        </a>
        <a class="flex-1 width-0 text-ellipsis-2" href="matchDetail.html" title="比赛详情">Chelsea</a>
      </div>
    </div>
  </div>
</div>
